<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</body>
<script>
    // * 函数是否在new中调用，如果是的话，this绑定的是新创建的对象
    // * 函数是否通过call、apply（显示绑定）调用，如果是，则this绑定的是执行的对象
    // * 函数是否在某个上下文对象中调用(隐式绑定)，如果有，则this绑定在这个上下文对象上
    // * 如果以上都不是 则默认绑定 执行window
    // {
    //     const btns = document.querySelectorAll("button");
    //     btns.forEach(function(btn){
    //         btn.onclick = function(){
    //             console.log(this);
    //         }
    //     })
    //     // btns[0].onclick();
    // }
    {
        const Box = function(){
            this.btns = document.querySelectorAll("button");
            this.init();
        }
        // Box.prototype.init = function(){
        //     const _this = this;
        //     this.btns.forEach(function(btn){
        //         btn.onclick = function(){
        //             console.log(this);
        //         }.bind(_this)
        //     })
        // }
        Box.prototype.init = function(){

            this.btns.forEach((btn)=>{

                btn.onclick = ()=>{
                    console.log(this);
                }
            })
        }
        new Box();
    }



</script>
</html>